/*
 * @Author: nainaiyi s15037075861@163.com
 * @Date: 2022-09-05 10:52:40
 * @LastEditors: nainaiyi s15037075861@163.com
 * @LastEditTime: 2022-09-05 14:54:45
 * @FilePath: \shopapp\src\pages\detail\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState, useEffect } from 'react'
import { useParams } from 'react-router-dom'
import { Card, Image, Space, Button, Toast } from "react-vant"
import { Like, Arrow } from "@react-vant/icons"
import { useDispatch } from 'react-redux'
import axios from 'axios'
import { fetchAddDataAction } from '../../store/shop/shopAction'
import { homeListType } from '../../store/home/homeReducer'

const Detail: React.FC = () => {
    const dispatch = useDispatch()
    const { id } = useParams()
    console.log()
    const [item, setItem] = useState<homeListType>()
    useEffect(() => {
        // 获取详情数据
        const fetch_detail = async () => {
            const res = await axios.get("/api/detail", {
                params: { id }
            })
            if (res.data.code === 200) {
                setItem(res.data.data)
            }
        }
        fetch_detail()
    }, [])
    const addCar = () => {
        dispatch(fetchAddDataAction(item!))
        Toast.success('添加成功')
    }

    return (
        <div>

            <Card round style={{ marginBottom: 20 }}>
                <Card.Cover >
                    <Image src={item?.url} />
                </Card.Cover>
                <Card.Body >
                    <p style={{ color: "red" }}>￥<span>{item?.price}</span></p>
                    <p>{item?.state}</p>
                    <h4>{item?.title}</h4>
                    <p>{item?.desc}</p>
                </Card.Body>
                <Card.Footer>
                    <Space>
                        <Button round size='small'>
                            更多
                        </Button>
                        <Button
                            icon={<Like />}
                            round
                            color='linear-gradient(to right, #ff6034, #ee0a24)'
                            size='small'
                            onClick={() => addCar()}
                        >
                            加入购物车
                        </Button>
                    </Space>
                </Card.Footer>
            </Card>
        </div>
    )
}

export default Detail